<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500" style="border: 1px solid red;">
			
		</canvas>
	</body>
	<script>
		function jingxiang(){
			var canvas = document.getElementById("canvas");
			if(canvas.getContext){
				var context = canvas.getContext("2d");
				context.strokeRect(50,50,100,200);
				context.stroke();
				
				var lgdt = context.createLinearGradient(50,50,150,50);
				lgdt.addColorStop(0,"#663300");
				lgdt.addColorStop(0.5,"#996600");
				lgdt.addColorStop(1,"#663300");
				context.fillStyle = lgdt;
				context.fillRect(50,50,100,200);
				
				//垂直渐变
				var vlgrd = context.createLinearGradient(50,50,50,250);
				vlgrd.addColorStop(0,'rgba(0,0,0,0.5');
				vlgrd.addColorStop(0.4,'rgba(0,0,0,0.0)');
				context.fillStyle = vlgrd;
				context.fillRect(50,50,100,200);
				
			}
		}
		jingxiang();
	</script>
</html>
